<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg描边动画</title>
    <style>
        .icon1{
            /* 填充颜色 */
            fill:none;
            /* 图形元素的外轮廓的颜色 */
            stroke: #333333;
            /* 图形元素的外轮廓的宽度 */
            stroke-width: 10;
            /* 两端的形状 */
            stroke-linecap: round;
        }
        @keyframes move {
            0%{
                /* 指定线条长度和间宽 */
                stroke-dasharray: 0,600px;
            }
            100%{
                stroke-dasharray: 600px,0;
            }
        }
        .icon:hover{
            animation: move 1s;
        }
    </style>
</head>
<body>
<svg t="1693989853922" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5161"
     xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
    <path class="icon1"
          d="M947.4 512H710.1c-3.3 0-6-2.7-6-6V140.4c0-6.6-5.4-12-12-12H269c-6.6 0-12 5.4-12 12V314c0 3.3-2.7 6-6 6H76.2c-6.6 0-12 5.4-12 12v616c0 6.6 5.4 12 12 12h871.2c6.6 0 12-5.4 12-12V524c0-6.6-5.4-12-12-12z m-691.2-69.9c0 3.3-2.7 6-6 6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6h52c3.3 0 6 2.7 6 6V570c0 3.3-2.7 6-6 6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6h52c3.3 0 6 2.7 6 6v51.9c0 3.3-2.7 6-6 6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6h52c3.3 0 6 2.7 6 6V890c0 3.3-2.7 6-6 6h-116c-3.3 0-6-2.7-6-6V390c0-3.3 2.7-6 6-6h116c3.3 0 6 2.7 6 6v52.1zM640.1 890c0 3.3-2.7 6-6 6h-83.3c-3.3 0-6-2.7-6-6V773.9c0-3.3 2.7-6 6-6h19.3c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-180c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6h20.7c3.3 0 6 2.7 6 6V890c0 3.3-2.7 6-6 6H327c-3.3 0-6-2.7-6-6V198.4c0-3.3 2.7-6 6-6h307.1c3.3 0 6 2.7 6 6V890z m255.3 0c0 3.3-2.7 6-6 6H710.1c-3.3 0-6-2.7-6-6v-52.3c0-3.3 2.7-6 6-6h116c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-116c-3.3 0-6-2.7-6-6v-51.8c0-3.3 2.7-6 6-6h116c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-116c-3.3 0-6-2.7-6-6V582c0-3.3 2.7-6 6-6h179.2c3.3 0 6 2.7 6 6v308z"
          p-id="5162"></path>
    <path class="icon1"
          d="M390.1 320h52c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6z m128 0h52c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6z m-128 106.6h52c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6z m128 0h52c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6z m-128 106.7h52c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6z m128 0h52c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6z m-75.9 42.6h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6h52c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6z m128 0h-52c-3.3 0-6 2.7-6 6v52c0 3.3 2.7 6 6 6h52c3.3 0 6-2.7 6-6v-52c0-3.3-2.7-6-6-6z"
          p-id="5163"></path>
</svg>
</body>
</html>
